<template>
	<view class="main">
		<image src="../../static/logo.png" mode="" class="logo"></image>
		<view class="title">
			小竹财税
		</view>
		<view class="info">
			小竹财税，让天下没有难懂的财税
		</view>

		<view class="form">
			<u--form labelPosition="left" :model="loginForm" ref="uForm" labelWidth="65" :labelStyle="{
				padding: '15rpx 0'
			}">
				<u-form-item label="手机号" borderBottom style="padding-top: 30rpx;">
					<u--input v-model="loginForm.mobile" border="none" placeholder="输入手机号"></u--input>
				</u-form-item>
				<u-form-item label="验证码" borderBottom style="padding-top: 30rpx;">
					<u--input v-model="loginForm.code" border="none" placeholder="输入验证码">
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒后重新获取"></u-code>
							<view style="color: #1C87F3;font-size: 30rpx;" @click="getCode">
								{{tips}}
							</view>
						</template>
					</u--input>
				</u-form-item>
			</u--form>
			<view style="margin: 70rpx 10rpx 0;">
				<u-button text="绑定账号" color="#3488f7" @click="login"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import request from "@/api/http.js"

	function isValidPhoneNumber(phoneNumber) {
		var regex = /^1[3|4|5|7|8|9][0-9]{9}$/;
		return regex.test(phoneNumber);
	}
	export default {
		data() {
			return {
				loginForm: {
					mobile: '',
					code: ''
				},
				tips: '',
				openId: '',
				official_openid: ''
			};
		},
		onLoad(query) {
			this.openId = query.openId
			// this.openId = 'o3KfJ6cFV8SaPgAuT6IEAoTGzLQ4'
			
			this.official_openid = uni.getStorageSync('official_openid')
			if (this.openId == this.official_openid) {
				uni.navigateTo({
					url: '/pages/bindingSuccess/bindingSuccess'
				})
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},

			async login() {
				if (!this.loginForm.mobile) {
					uni.$u.toast('请输入手机号');
					return
				}
				if (!isValidPhoneNumber(this.loginForm.mobile)) {
					uni.$u.toast('请输入正确的手机号');
					return
				}
				if (!this.loginForm.code) {
					uni.$u.toast('请输入验证码');
					return
				}
				if (!this.openId) {
					uni.$u.toast('获取openId失败');
					return
				}
				const res = await request('/api/user/official_bind_account', 'POST', {
					captcha: this.loginForm.code * 1,
					mobile: this.loginForm.mobile * 1,
					official_openid: this.openId
				});
				if (res.code == 1) {
					uni.setStorageSync('token', res.data.token)
					uni.setStorageSync('official_openid', res.data.official_openid);
					uni.setStorageSync('username', res.data.username);
					uni.redirectTo({
						url: '/pages/bindingSuccess/bindingSuccess'
					})
				} else {
					uni.$u.toast(res.msg);
				}
			},

			async getCode() {
				if (!this.loginForm.mobile) {
					uni.$u.toast('请输入手机号');
					return
				}
				if (!isValidPhoneNumber(this.loginForm.mobile)) {
					uni.$u.toast('请输入正确的手机号');
					return
				}

				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})

					const res = await request('/api/sms/send', 'POST', {
						event: "mobilelogin",
						mobile: this.loginForm.mobile
					});
					if (res.code == 1) {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					} else {
						uni.$u.toast('验证码发送失败，请重试');
					}

				} else {
					uni.$u.toast('请等待倒计时结束');
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 60rpx 40rpx;
	}

	.logo {
		width: 120rpx;
		height: 120rpx;
	}

	.title {
		font-size: 70rpx;
		padding: 26rpx 0;
		color: #333333;
	}

	.info {
		color: #82848a;
		font-size: 28rpx;
	}
</style>